
<DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /**{*/
        /*    !*width: 100%;*!*/
        /*    !*height: 1000px;*!*/
        /*    padding: 0;*/
        /*    margin: 0;*/
        /*}*/
        /*form{*/
        /*    !*display: flex;*!*/
        /*    align-content: center;*/
        /*    justify-content: center;*/
        /*    width: 100%;*/
        /*    height: 1000px;*/
        /*}*/
    </style>
</head>
<body>

<form action="user.php" method="post" enctype="multipart/form-data">

    <div id="image">
        上传头像<input name="file" type="file" id="file" >
    </div>
<!---->
<!--    <span style="font-size: medium;font-weight: bolder">姓名</span><br />-->
<!--    <input name="userName" value="" placeholder="请输入姓名" ><br />-->
    <input type="submit" value="提交">
</form>

</body>
<script type="text/javascript">
    var fileObj = document.getElementById('file');
    function showImg() {

        var files = fileObj['files'];
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(files[0]);
        document.getElementById('showImg').src = imgURL;
    }
    onload = function(){
        console.log(fileObj)
        fileObj.onchange = showImg;
    }
</script>
</html>